<template>
  <view>
    <!-- 搜索框 -->
    <UgoSearch></UgoSearch>
    <!-- 轮播图 -->
    <u-swiper
      :list="swiperData"
      name="image_src"
      mode="dot"
      height="340"
    ></u-swiper>
    <!-- 导航 -->
    <view class="u-flex">
      <navigator
        class="u-flex-1 u-p-20"
        v-for="item in catitems"
        :key="item.name"
      >
        <u-image mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view
      class="floor-group"
      v-for="item1 in floordata"
      :key="item1.floor_title.name"
    >
      <view class="floor-title">
        <u-image mode="widthFix" :src="item1.floor_title.image_src"></u-image>
      </view>
      <view class="floor-content">
        <navigator v-for="item2 in item1.product_list" :key="item2.name">
          <u-image
            mode="scaleToFill"
            height="100%"
            :src="item2.image_src"
          ></u-image>
        </navigator>
      </view>
    </view>
  </view>
</template>
<script>
import uviewUi from "uview-ui";
export default {
  data() {
    return {
      swiperData: [],
      catitems: [],
      floordata: [],
    };
  },

  onLoad() {
    // 轮播图
    this.getSwiperData();
    //导航
    this.getCatitems();
    // 楼层
    this.getFloordata();
  },
  //   https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
  methods: {
    // 调用轮播图
    async getSwiperData() {
      /// 使用 uviewUi
      const result = await this.$u.get("/home/swiperdata");
      // console.log(result);
      this.swiperData = result.message;
      //
    },
    //调用导航数据
    async getCatitems() {
      const result = await this.$u.get("/home/catitems");
      // console.log(result);
      this.catitems = result.message;
    },
    // 调用楼层
    async getFloordata() {
      const result = await this.$u.get("/home/floordata");
      console.log(11, result);
      this.floordata = result.message;
    },
  },
};
</script>
<style  lang='scss'>
.floor-content {
  overflow: hidden;
  navigator {
    float: left;
    margin-left: 14rpx;
  }
  navigator:first-child {
    width: 232rpx;
    height: 386rpx;
  }
  navigator:nth-last-child(-n + 4) {
    width: 232rpx;
    height: 188rpx;
  }
  navigator:nth-last-child(-n + 2) {
    margin-top: 14rpx;
  }
}
// ----------------------------------------------
</style>
